<template>
  <div>
    <el-button plain @click="openDeviceSelector" size="mini">选择设备:{{selectedPk}}/{{selectedDn}}</el-button>
    <DeviceSelector v-if="showDeviceSelector" @deviceSelected="onDeviceSelected"></DeviceSelector>
    <div>
      <el-row v-for="service in config.services" :key="service.identifier">
        <el-col :span="22">
          <el-row class="service-box">
            <el-col :span="8">
              <el-select size="mini" v-model="service.identifier" @change="serviceSelected(service)">
                <el-option label="设置属性" value="set"></el-option>
                <el-option v-for="s in services" :label="s.name" :value="s.identifier" :key="s.identifier"></el-option>
              </el-select>
            </el-col>
            <el-col :span="16" style="padding-left:5px">
              <el-row v-if="service.identifier=='set'">
                <el-col :span="20">
                  <el-row v-for="param in service.inputData" :key="param.identifier">
                    <el-col :span="10">
                      <el-select size="mini" v-model="param.identifier">
                        <el-option v-for="prop in properties" :label="prop.name" :value="prop.identifier" :key="prop.identifier"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="2">
                      值:
                    </el-col>
                    <el-col :span="7">
                      <el-input v-model="param.value" size="mini"></el-input>
                    </el-col>
                    <el-col :span="2">
                      <el-button @click="delParam(service.inputData,param)" size="mini">-</el-button>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="2">
                  <el-button @click="addParam(service.inputData)" size="mini">+</el-button>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="20">
                  <el-row v-for="param in findService(service.identifier).inputData" :key="param.identifier">
                    <el-col :span="10">
                      {{param.name}}
                    </el-col>
                    <el-col :span="2">
                      值:
                    </el-col>
                    <el-col :span="7">
                      <el-input v-model="param.value" size="mini"></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2" style="padding-left:3px">
          <el-button @click="delService(service)" size="mini">-</el-button>
        </el-col>
      </el-row>
      <el-button @click="addService" size="mini">+</el-button>
    </div>

  </div>
</template>

<script>
  import DeviceSelector from '../device/DeviceSelector.vue'
  import {
    GetThingModel,
  } from '../../api/productApi'
  export default {
    name: 'DeviceAction',
    props: {
     config:{
         type: Object,
         default: () => {
            return {
              type: 'device',
              services: [{
                device: '',
                identifier: 'set',
                inputData: []
              }]
            }
         }
     }
    },
    data() {
      return {
        showDeviceSelector: false,
        selectedPk:'',
        selectedDn:'',
        properties:[],
        services:[],
      }
    },
    // 注册组件
    components: {
        DeviceSelector
    },
    created() {
      this.init();
    },
    watch:{
      config(){
        this.init();
      }
    },
    methods: {
      init(){
        if(!this.config.services || this.config.services.length==0){
          return;
        }
        let service=this.config.services[0];
        if(service.device){
          let pkDn=service.device.split('/');
          this.selectedPk=pkDn[0];
          this.selectedDn=pkDn[1];
          this.getThingModel(pkDn[0]);
        }
      },
      openDeviceSelector(){
          this.showDeviceSelector=!this.showDeviceSelector
      },
      onDeviceSelected(device){
        this.selectedPk=device.productKey;
        this.selectedDn=device.deviceName;
        this.showDeviceSelector=false
        this.config.services=[];
        this.getThingModel(device.productKey)
      }, 
      getThingModel(pk) {
        this.loading = true
        GetThingModel(pk)
        .then(res => {
          this.initThingModel(res)
        })
      },
      initThingModel(res){
        this.properties=[];
        this.services=[];

        res.model.properties.forEach(p=>{
          this.properties.push(p);
        });

        res.model.services.forEach(s=>{
            this.services.push(s);
        });
      },
      addService(){
        this.config.services.push({
          device: this.selectedPk+'/'+this.selectedDn,
          identifier: 'set',
          inputData: []
        });
      },
      serviceSelected(service){
        this.services.forEach(s=>{
          if(service.identifier==s.identifier){
            service.inputData=s.inputData;
          }
        })
      },
      delService(service){
        let idx=this.config.services.findIndex(s=>s.identifier==service.identifier);
        this.config.services.splice(idx,1);
      },
      findService(identifier){
        let service={};
        this.services.forEach(s=>{
          if(s.identifier==identifier){
            service=s;
            return service;
          }
        })
        return service;
      },
      addParam(inputData){
        inputData.push({});
      },
      delParam(inputData,param){
        let idx= inputData.findIndex(d=>d.identifier=param.identifier);
        inputData.splice(idx,1);
      }
    }
  }
</script>

<style scoped>
.service-box{
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 5px 0;
  background-color: #EEE;
}
</style>
